<template>
  <div class="marketing_list">
    <!-- <div class="search-box">
      <Row type="flex">
        <Row type="flex"
             justify="start"
             class="search-item-left">
          <Col class="search-item"><span class="search-label">销售渠道：</span>
          <div style="display: inline-block;">

          </div>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="search">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
      </Row>
    </div> -->
    <Table stripe
           class="table-list"
           style="border-top:#E9E9E9 1px solid!important"
           :columns="columns"
           :data="tableData"
           :loading="loading"
           :height="tableHeight">
      <template slot-scope="{ row }"
                slot="title">
        <span>{{row.number}}</span>
      </template>
    </Table>
    <Row type='flex'
         justify="end"
         style='padding: 20px'>
      <Col>
      <Page :total="pageObj.total"
            :page-size='pageObj.pageSize'
            :current='pageObj.pageIndex'
            :page-size-opts='[20,50,100,200]'
            show-total
            show-sizer
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>
<script>
import { getchannelList } from '@/api/merchandise/index'
export default {
  name: 'marketing_list',
  data () {
    return {
      loading: false,
      columns: [
        {
          title: '渠道ID',
          slot: 'title',
          align: 'center'
        },
        {
          title: '销售渠道名称',
          key: 'name',
          align: 'center'
        }
      ],
      tableData: [],
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      }
    }
  },
  // 计算属性
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 580 : 0
      return height
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      getchannelList({
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.tableData = res.data.data || []
          this.pageObj.total = res.data.totalCount
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 查询
    search () {

    },
    // 改变页码
    changePageIndex (pageIndex) {
      this.pageObj.pageIndex = pageIndex
      this.getList()
    },
    // 改变大小
    changePageSize (pageSize) {
      this.pageObj.pageSize = pageSize
      this.getList()
    },
    // 重置
    reset () {

    }
  }
}
</script>
